<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// Table columns
const columns = [
  { prop: 'id', label: 'ID', width: '80px' },
  { prop: 'name', label: '患者姓名' },
  { prop: 'gender', label: '性别' },
  { prop: 'age', label: '年龄' },
  { prop: 'phone', label: '联系电话' },
  { prop: 'department', label: '就诊科室' },
  { prop: 'status', label: '状态' },
  { prop: 'lastVisit', label: '最近就诊', sortable: true },
  { prop: 'actions', label: '操作', width: '150px' }
];

// Filter form
const filterForm = reactive({
  keyword: '',
  department: '',
  status: '',
  ageGroup: ''
});

// Department options
const departmentOptions = [
  { value: '', label: '全部科室' },
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'gynecology', label: '妇产科' },
  { value: 'pediatrics', label: '儿科' },
  { value: 'ophthalmology', label: '眼科' },
  { value: 'dental', label: '口腔科' },
  { value: 'other', label: '其他' }
];

// Patient status options
const statusOptions = [
  { value: '', label: '全部状态' },
  { value: 'active', label: '活跃' },
  { value: 'followup', label: '随访中' },
  { value: 'discharged', label: '已出院' },
  { value: 'inactive', label: '长期未就诊' }
];

// Age group options
const ageGroupOptions = [
  { value: '', label: '全部年龄段' },
  { value: 'child', label: '儿童(0-14岁)' },
  { value: 'youth', label: '青少年(15-24岁)' },
  { value: 'adult', label: '成年(25-64岁)' },
  { value: 'elderly', label: '老年(65岁以上)' }
];

// Patient data (mock data)
const patientData = ref([
  {
    id: 'P10001',
    name: '张三',
    gender: '男',
    age: 45,
    phone: '13800138001',
    department: '内科',
    status: '活跃',
    lastVisit: '2023-06-15',
    statusClass: 'success'
  },
  {
    id: 'P10002',
    name: '李四',
    gender: '男',
    age: 32,
    phone: '13900139002',
    department: '外科',
    status: '随访中',
    lastVisit: '2023-06-10',
    statusClass: 'primary'
  },
  {
    id: 'P10003',
    name: '王五',
    gender: '男',
    age: 68,
    phone: '13700137003',
    department: '内科',
    status: '活跃',
    lastVisit: '2023-06-05',
    statusClass: 'success'
  },
  {
    id: 'P10004',
    name: '赵六',
    gender: '男',
    age: 55,
    phone: '13600136004',
    department: '眼科',
    status: '已出院',
    lastVisit: '2023-05-30',
    statusClass: 'warning'
  },
  {
    id: 'P10005',
    name: '陈七',
    gender: '女',
    age: 42,
    phone: '13500135005',
    department: '妇产科',
    status: '长期未就诊',
    lastVisit: '2023-04-20',
    statusClass: 'danger'
  },
  {
    id: 'P10006',
    name: '钱八',
    gender: '男',
    age: 28,
    phone: '13400134006',
    department: '口腔科',
    status: '活跃',
    lastVisit: '2023-06-02',
    statusClass: 'success'
  },
  {
    id: 'P10007',
    name: '孙九',
    gender: '女',
    age: 36,
    phone: '13300133007',
    department: '妇产科',
    status: '随访中',
    lastVisit: '2023-06-08',
    statusClass: 'primary'
  },
  {
    id: 'P10008',
    name: '周十',
    gender: '男',
    age: 12,
    phone: '13200132008',
    department: '儿科',
    status: '活跃',
    lastVisit: '2023-06-01',
    statusClass: 'success'
  }
]);

// Pagination
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
});

// Filter patients
const filteredPatients = ref([]);

const filterPatients = () => {
  let result = patientData.value;
  
  // Filter by keyword
  if (filterForm.keyword) {
    const keyword = filterForm.keyword.toLowerCase();
    result = result.filter(patient => 
      patient.name.toLowerCase().includes(keyword) || 
      patient.id.toLowerCase().includes(keyword) || 
      patient.phone.includes(keyword)
    );
  }
  
  // Filter by department
  if (filterForm.department) {
    result = result.filter(patient => 
      patient.department === departmentOptions.find(option => option.value === filterForm.department)?.label
    );
  }
  
  // Filter by status
  if (filterForm.status) {
    result = result.filter(patient => 
      patient.status === statusOptions.find(option => option.value === filterForm.status)?.label
    );
  }
  
  // Filter by age group
  if (filterForm.ageGroup) {
    result = result.filter(patient => {
      const age = patient.age;
      
      switch(filterForm.ageGroup) {
        case 'child':
          return age >= 0 && age <= 14;
        case 'youth':
          return age >= 15 && age <= 24;
        case 'adult':
          return age >= 25 && age <= 64;
        case 'elderly':
          return age >= 65;
        default:
          return true;
      }
    });
  }
  
  filteredPatients.value = result;
  pagination.total = result.length;
};

// Navigate to patient detail
const viewPatient = (id) => {
  router.push(`/patients/${id}`);
};

// Handle pagination change
const handleCurrentChange = (currentPage) => {
  pagination.currentPage = currentPage;
};

// Add new patient
const addNewPatient = () => {
  console.log('Add new patient');
  // Implement new patient logic
};

// Export patient data
const exportData = () => {
  console.log('Export patient data');
  // Implement export logic
};

// Reset filter form
const resetForm = () => {
  filterForm.keyword = '';
  filterForm.department = '';
  filterForm.status = '';
  filterForm.ageGroup = '';
  filterPatients();
};

// Initialize component
onMounted(() => {
  filterPatients();
});
</script>

<template>
  <div>
    <div class="page-header">
      <h1 class="page-title">患者列表</h1>
      <p class="page-subtitle">管理和查看患者信息</p>
    </div>
    
    <!-- Filters and actions -->
    <div class="card">
      <div class="card-body">
        <el-form :model="filterForm" inline @submit.prevent="filterPatients">
          <el-form-item>
            <el-input 
              v-model="filterForm.keyword" 
              placeholder="搜索患者姓名/ID/电话"
              clearable
              @clear="filterPatients"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.department" placeholder="就诊科室" clearable @change="filterPatients">
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.status" placeholder="患者状态" clearable @change="filterPatients">
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-select v-model="filterForm.ageGroup" placeholder="年龄段" clearable @change="filterPatients">
              <el-option
                v-for="item in ageGroupOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="filterPatients">筛选</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
        
        <div class="table-actions">
          <el-button type="primary" @click="addNewPatient">
            <el-icon><Plus /></el-icon>
            添加患者
          </el-button>
          <el-button @click="exportData">
            <el-icon><Download /></el-icon>
            导出数据
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- Patient table -->
    <div class="card">
      <div class="card-body">
        <el-table
          :data="filteredPatients"
          style="width: 100%"
          border
        >
          <el-table-column
            prop="id"
            label="ID"
            width="100"
          />
          <el-table-column
            prop="name"
            label="患者姓名"
            width="120"
          />
          <el-table-column
            prop="gender"
            label="性别"
            width="60"
          />
          <el-table-column
            prop="age"
            label="年龄"
            width="60"
          />
          <el-table-column
            prop="phone"
            label="联系电话"
            width="140"
          />
          <el-table-column
            prop="department"
            label="就诊科室"
            width="100"
          />
          <el-table-column
            prop="status"
            label="状态"
            width="100"
          >
            <template #default="scope">
              <span :class="['status-tag', scope.row.statusClass]">
                {{ scope.row.status }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="lastVisit"
            label="最近就诊"
            width="120"
            sortable
          />
          <el-table-column
            label="操作"
            fixed="right"
            width="180"
          >
            <template #default="scope">
              <el-button type="primary" size="small" text @click="viewPatient(scope.row.id)">
                <el-icon><View /></el-icon>
                查看
              </el-button>
              <el-button type="primary" size="small" text>
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-dropdown>
                <el-button type="primary" size="small" text>
                  <el-icon><More /></el-icon>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item>添加就诊记录</el-dropdown-item>
                    <el-dropdown-item>预约随访</el-dropdown-item>
                    <el-dropdown-item divided>删除</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- Pagination -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            background
            layout="total, prev, pager, next"
            :total="pagination.total"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page-header {
  margin-bottom: 24px;
}

.page-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
}

.page-subtitle {
  margin: 0 0 16px 0;
  color: var(--text-secondary);
}

.table-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 状态标签样式继承自全局样式 */
</style> 